{extend name="common:main" /}
{block name="cssjs"}
<style type="text/css">
#json_tree{width:100%;overflow:hidden;}
#json_tree ul{list-style:none;margin:0px;padding:0px;padding-left:20px;}
#json_tree li{padding:0;margin:0;}
#json_tree .tree{cursor:pointer;margin-left:-16px;margin-right:2px;}

#json_tree .node{color:#7F007F;}
#json_tree .val{}
</style>
<script src="__PUBLIC__/static/js/admin/json_tree.js?{$Think.config.html_v}"></script>
{/block}
{block name="content"}
<div class="box box-default">
	<div class="box-body">
		<div class="form-group">
			<div class="input-group">
				<textarea id="txt_json" rows="2" class="form-control" placeholder="输入网址或json字符串，网址必须以http://或https://开头"></textarea>
				<a href="javascript:;" class="input-group-addon" id="btn_tree">确定</a>
			</div>
		</div>
		<div id="json_tree"></div>
	</div>
</div>
<script type="text/javascript">
'use strict';//严格模式
$(document).ready(function(){
	jsonTree.treeId='#json_tree';
	jsonTree.treeClass='.tree';
	
	$('#btn_tree').bind('click',function(){
		var data=$('#txt_json').val();
		
		if(htmlIsJson(data)){
			//是json字符串
			jsonTree.load(data);
		}else if((/^\w+\:\/\//).test(data)){
			//是网址
			$.ajax({
				type: 'POST',
				dataType: 'json',
				url:ulink('Tool/json_tree'),
				data: {'url':data},
				success: function (data) {
					data=data.data.json;
					jsonTree.load(data);
				}
			});
		}else{
			toastr.error('请输入网址或json字符串！');
		}
	});
	
});
</script>
{/block}